<!--前台管理页面主页面-->
<template>
  <el-container style="height: 100vh">
<!--    引入导航栏-->
    <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: #cccccc">
      <ManagerAside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
    </el-aside>

    <el-container>
<!--引入页眉-->
      <el-header style="border-bottom: 1px solid #ccc">
        <ManagerHeader :collapseBtnClass="collapseBtnClass" :collapse="collapse" />
      </el-header>
<!--引入主界面-->
      <el-main>
        <router-view/>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>

import ManagerAside from "../../../components/managerSidebar.vue";
import ManagerHeader from "../../../components/managerHeader.vue";

export default {
  name: 'managerMain',
  components: {ManagerHeader, ManagerAside},
  data(){
    return {
      //页面装饰变量
      collapseBtnClass:"el-icon-s-fold",
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true
    }
  },
  methods:{
    //收缩按钮
    collapse(){//点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if(this.isCollapse){//收缩
        this.sideWidth = 64
        this.collapseBtnClass="el-icon-s-unfold"
        this.logoTextShow = false
      }else{//展开
        this.sideWidth = 200
        this.collapseBtnClass="el-icon-s-fold"
        this.logoTextShow = true
      }
    }
  }
}
</script>
